原生ajax请求超时处理,关于原生AJAX | 您所在的位置:网站首页 › js ajax请求怎么写超时 › 原生ajax请求超时处理,关于原生AJAX |
一、原生AJAX基础知识 (一)描述 AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML) 通过在后台与服务器进行少量的数据交换,AJAX可以使网页实现异步更新——在不重新加载整个网页的情况下,对网页的某部分进行更新 (二)工作原理 (三)浏览器发送请求 GET请求 xhr.open("GET", "data/a.text", true) xhr.send() open(method,url,async) 规定请求的类型、URL 以及是否异步处理请求 method:请求的类型;GET 或 POST url:文件在服务器上的位置 async:true(异步)或 false(同步) send(string) 将请求发送到服务器 string:仅用于 POST 请求 POST请求——修改请求头 xhr.open("POST","/try/ajax/demo_post2.php",true); xhr.setRequestHeader("content-type","application/x-www-urlencoded"); xhr.send("fname=Henry&lname=Ford") setRequestHeader(header,value) 向请求添加 HTTP 头 header: 规定头的名称 value: 规定头的值 异步 XMLHttpRequest 对象使用 AJAX,open() 方法的 async 参数必须设置为 true 通过 AJAX,JavaScript 无需等待服务器的响应 在等待服务器响应时执行其他脚本 当响应就绪后对响应进行处理 使用 async=true 时,请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数 (四)服务器创建响应 获取服务器数据响应使用XMLHttpRequest对象的responeseText和responseXML属性 responseText——获得字符串形式的响应数据 responseXML——获得 XML 形式的响应数据,作为 XML 对象进行解析 (五)浏览器处理响应 onreadyStateChange事件 处理服务器响应,需要先监听请求的状态,当响应准备就绪开始处理 每当 readyState 改变时,就会触发 onreadystatechange 事件 readyState 属性存有 XMLHttpRequest 的状态信息 属性 描述 onreadyStateChange 存储函数,每当readyState属性改变,调用该函数 readyState 存有 XMLHttpRequest 的状态 0:请求未初始化——未调用open() 1:请求连接已经建立——未调用send() 2:请求已发送 3:请求处理中 4:请求已完成,响应准备就绪 status 200: "OK" 404: "Not Found" (六)AJAX原生JS操作 //1.创建Ajax实例 let xhr = new XMLHttpRequest();//IE下为ActiveObject对象 //2.设置请求配置 xhr.open("GET", "data/a.text", true) //3.事件监听:通过监听readyStateChange事件,获知AJAX状态改变 xhr.onreadyStateChange = function() { //请求完成 获取服务器返回的响应头响应主体 if(xhr.readyState == 4 && xhr.status == 200 ) { console.log(xhr.responseText) } } //4.发送Ajax请求 xhr.send() 创建 XMLHttpRequest 对象——let xhr = new XMLHttpRequest() 规定请求的类型、URL与异步——xhr.open("GET", url, true) 当服务器响应就绪时执行函数——xhr.onreadyStateChange = callback 发送请求到服务器——xhr.send() 二、jQuery.ajax $.ajax(url, [settings]) (一)描述 通过 HTTP 请求加载远程数据 $.ajax() 返回其创建的 XMLHttpRequest 对象 $.ajax({ type: "GET",//请求类型 url:"test.html",//发送请求的地址 data: "",//发送到服务器的数据。将自动转换为请求字符串格式 dataType: "html",//预期服务器返回的数据类型 async: true,//请求是否异步,默认为异步 headers: {},//设置消息头中的值 timeout: "",//设置请求超时时间(毫秒) beforeSend: function(XMLHttpRequest) { //请求前的处理——可修改XMLHttpRequest对象,如自定义请求头 }, success: function(data, status) { //请求成功时处理 }, complete: function(XMLHttpRequest, status) { //请求完成的处理 }, error: function() { //请求出错处理 } }) 原文:https://www.cnblogs.com/zengbin13/p/12905303.html |
CopyRight 2018-2019 实验室设备网 版权所有 |